import React, { useEffect, useState } from 'react';
import {$getImg} from "../../api/getImgapi";
import {useNavigate} from "react-router-dom";
import {$cancelFollow,$handleFollow,$getFollow} from "../../api/followlistapi";
import {Button} from "antd";
import photo from '../../resource/photo.png';

export default function Followlist({item}) {
    //跳转页面导航
    const navigate = useNavigate();
//获取头像数据
    const [imgdata,setImgData]=useState();
    //显示关注按钮的状态
    const [backendData, setBackendData] = useState(0);
//获取头像信息
    const getImg=async ()=>{
        const response=$getImg({ studentId: item.studentId.toString() });
        response.then((result) => {
            if(result.code===1){
                const { data } = result;
                setImgData(data);
            }
        });
    }
    useEffect(()=>{
        getImg();//获取用户头像
        getFollowship()//获取双方的关系
    },[])
    //点击头像函数
    const handleAvatarClick = (studentId) => {
        navigate(`/layout/othermine/${studentId}`);
    };
    //获取双方关注的关系
    const getFollowship=async()=>{
        const response= await $getFollow({ studentId:item.studentId.toString()});
        setBackendData(response.data);
    }
    //点击关注按钮
    const handlefollow= async ()=>{
        switch (backendData) {
            case 0:
                setBackendData(1); // 从关注切换为已关注
                await $handleFollow({ studentId: item.studentId.toString() });
                break;
            case 1:
                setBackendData(0); // 从已关注切换为关注
                $cancelFollow({ studentId: item.studentId.toString() });
                break;
            case 2:
                setBackendData(0); // 从互关切换为关注
                $cancelFollow({ studentId: item.studentId.toString() });
                break;
            default:
                setBackendData(0);
                break;
        }
    };
    // 根据后端数据渲染按钮文本
    let buttonText;
    switch (backendData) {
        case 0:
            buttonText = '关注';
            break;
        case 1:
            buttonText = '已关注';
            break;
        case 2:
            buttonText = '互关';
            break;
        default:
            buttonText = '关注';
            break;
    }
    // 根据后端数据渲染按钮样式类名
    let buttonClassName;
    switch (backendData) {
        case 0:
            buttonClassName = 'default';
            break;
        case 1:
            buttonClassName = 'primary';
            break;
        case 2:
            buttonClassName = 'primary';
            break;
    }
    return(
        <>
            <div style={{marginBottom: '30px', display: "flex", alignItems: 'center', justifyContent: 'space-between'}}>
                <div style={{marginLeft: '20px', display: 'flex'}}>
                    <img src={`data:image/jpeg;base64,${imgdata}`} width='50px' height='50px' alt="获取图片失败"
                         onClick={() => {
                             handleAvatarClick(item.studentId)
                         }}/>
                    <p style={{marginLeft: '10px', marginTop: '10px'}}>{item.nickname}</p>
                </div>
                <div style={{marginTop: '15px', marginLeft:'10px'}}>
                    <span style={{color:'rgba(82,80,80,0.5)'}}>{item.briefIntroduction}</span>
                </div>
                <div style={{display:'flex',marginLeft:'50px'}}>
                    <span style={{marginTop:'5px'}}>
                    <img src={photo} width='15px' height='15px'/>
                      </span>
                    <Button onClick={handlefollow} style={{ border: 'none'}}>{buttonText}</Button>
                </div>

            </div>

        </>
    )
}